<template>
  <div class="action-bar">
    <div v-if="title" class="batch-btns">
      <a-popover v-model:open="popupVisible" placement="bottom" trigger="click">
        <template #content>
          <div style="cursor: pointer" @click="popupVisible = false">
            <slot></slot>
          </div>
        </template>
        <div class="choose-btn">
          <span>{{ title }}</span>
          <icon-font type="icon-yumengtubiao_jiantouxiangxia" style="margin-left: 10px; color: #7d8389" />
        </div>
      </a-popover>
    </div>
    <slot name="add">
      <a-button size="small" type="primary" @click="emit('add')">
        {{ addText }}
      </a-button>
    </slot>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  addText: {
    type: String,
    default: '新建',
  },
})

const emit = defineEmits(['add'])
const popupVisible = ref(false)
</script>

<style lang="less" scoped>
.action-bar {
  display: flex;
  align-items: center;
}

.batch-btns {
  margin-right: 10px;

  .choose-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 14px;
    line-height: 30px;
    color: #575757;
    cursor: pointer;
    background: #f2f5f7;
    border-radius: 4px;
  }
}
</style>
